<template>
    <div style="height: 562px;">
        <div style="padding: 15px 0">
          <el-input
            style="width: 250px; height:30px; font-size:16px"
            placeholder="请输入鲜花名称..."
            v-model="flowerName"
            :rows="8"
            size="medium"
            clearable
          ></el-input>
          <el-button round class="ml-5" type="warning" @click="search" style="font-size:medium;margin-left: 7px" size="medium">搜索</el-button>
          <el-button round class="ml-5" type="info" @click="reset" style="font-size:medium;margin-left: 7px" size="medium">重置</el-button>
        </div>

        <el-table ref="table" :data="tableData" border stripe style="font-size:large;" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="65" align="center"></el-table-column>
          <el-table-column prop="flowerImg" label="鲜花图片" width="155px" align="center">
            <template v-slot="scope">
              <el-image style="width: 100px; height: 100px" :src="scope.row.flowerImg" :preview-src-list="scope.row.flowerImg"></el-image>
            </template>
          </el-table-column>
          <el-table-column prop="flowerName" label="名称" width="125px" align="center"></el-table-column>
          <el-table-column prop="price" label="单价" width="105px" align="center">
            <template v-slot="scope">
              {{ scope.row.price }}
            </template>
          </el-table-column>
          <el-table-column prop="createTime" label="加入购物车时间" width="200px" align="center"></el-table-column>
          <el-table-column prop="num" label="数量" width="195px" align="center">
            <template v-slot="scope">
              <el-input-number v-model="scope.row.num" :min="1" :max="100" label="购买数量" size="small" @change="changeNum(scope.row)"></el-input-number>
            </template>
          </el-table-column>
          <el-table-column prop="subTotal" label="小计" width="100px" align="center">
            <template v-slot="scope">
              <span style="color:orange">{{ scope.row.subTotal }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="154" align="center">
            <template slot-scope="scope">
              <el-popconfirm
                class="ml-5"
                confirm-button-text='确定'
                cancel-button-text='我再想想'
                title="确定要移除吗?"
                @confirm="handleDel(scope.row.id)"
                >
              <el-button type="danger" slot="reference"  style="font-size:medium">移除 <i class="el-icon-remove-outline"></i></el-button>
            </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>

        <div style="margin: 10px 0;margin-left:650px">
            <template>
              共选择了<span style="color:red;font-size: 20px"> {{ this.total }} </span>种商品,总计：<span style="color:red;font-size: 30px">{{ this.totalPrice }}.00 </span>
              <el-button style="color:white; background-color:brown; margin-left: 30px" size="large" @click="Settlement"><span style="font-size: 20px">去付款</span></el-button>
            </template>

        </div>
       
    </div>
</template>

<script>

export default {
  name: 'Cart',
  data(){
    return{
        tableData: [],
        total: 0,
        pageNum: 1,
        pageSize: 7,
        flowerName: "",
        code: "",
        dialogFormVisible: false,
        multipleSelection: [],
        form:{},
        totalPrice: 0,
        subTotal: 0
    }
  },
  created(){
    this.load();
  },
  methods:{
    load() {
        this.request.get("/cart/page",{
          params :{
            pageNum: this.pageNum,
            pageSize: this.pageSize,
            name: this.flowerName,
          }
        }).then(res =>{
          console.log('西瓜',res);
          this.tableData = res.data.records
          this.tableData.subTotal = res.data.records.price
          // this.total = res.data.total
          console.log('草莓',this.tableData);
        })
      },
    search(){
      this.load();
    },
    reset(){
      this.flowerName = '',
      this.load();
    },
    Settlement(){
      if(!this.multipleSelection.length){
        this.$notify.warning('付款前,请先至少选中一件商品！')
        return;
      }
      let data = {name: this.multipleSelection[0].flowerName,totalPrice: this.totalPrice,carts: this.multipleSelection}
      this.request.post('/orders/save',data).then(res =>{
        if(res.code === '200'){
          this.$notify.success('已生成订单！')
          this.load()
        }else{
          this.$message.error(res.msg)
        }
      })
      console.log('香蕉',data);
    },
    handleSizeChange(pageSize) {
      console.log(pageSize);
      this.pageSize = pageSize;
      this.load();
    },
    handleCurrentChange(pageNum) {
      console.log(pageNum);
      this.pageNum = pageNum;
      this.load();
    },
    handleDel(id){
      console.log('id',id);
      this.request.delete("/cart/delete/"+id).then(res =>{
        if(res){
          this.$notify.success('从购物车移除成功!')
          this.load()
        }else{
          this.$notify.error('从购物车移除失败!')
          this.load()
        }
      })
    },
    handleSelectionChange(val){
      this.multipleSelection = val
      let sum = 0;
      console.log('改变啦',val);
      this.total = val.length
      for(let i = 0;i < val.length;i++){
        sum += val[i].price * val[i].num
      }
      this.totalPrice = sum
      if(val.length === 0){
        this.totalPrice = 0
      }
      
    },
    cancel(){
      this.dialogFormVisible = false
      this.load()
    },
    changeNum(row){
      console.log('深拷贝',row);
      this.request.post('/cart/changeNum',JSON.parse(JSON.stringify(row))).then(res =>{
        
        this.totalPrice = 0;
        this.multipleSelection.forEach(item =>{
          // item.num = row.num
          this.totalPrice += item.price * item.num;
        })
        row.subTotal = row.price * row.num
        row.subTotal = row.subTotal + '.00'
      })
    },
    
  }
};
</script>

<style>
.headerBg2 {
  background-color: rgb(206, 151, 204) !important;
}
</style>